<template>
  <div
    class="case-page"
    :id="uuid"
    style="
      font-family: Arial, sans-serif;
      padding: 34px 30px;
      background-color: #fff;
      height: 100%;
    "
  >
    <div
      style="
        padding: 30px 15px;
        background-color: #fff;
        height: 100%;
        width: 100%;
        margin: 0 auto;
        font-size: 12px;
        box-sizing: border-box;
      "
    >
      <!-- 医院名称 -->
      <h1
        class="hospital-name"
        style="
          margin-bottom: 5px;
          text-align: center;
          font-size: 16px;
          margin-bottom: 20px;
        "
      >
        {{ info.title }}
      </h1>
      <h1
        class="hospital-name"
        style="text-align: center; font-size: 16px; margin-bottom: 20px"
      >
        {{ info.rxName }}
      </h1>

      <!-- 患者基础信息 -->
      <div
        class="patient-info"
        style="
          display: flex;
          flex-wrap: wrap;
          border-bottom: 2px solid rgba(0, 0, 0, 0.9);
          margin-bottom: 10px;
          padding-bottom: 10px;
        "
      >
        <div
          class="info-item"
          style="
            width: 33.33%;
            font-size: 12px;
            font-weight: 400;
            color: #000000;
            line-height: 22px;
            text-align: left;
            font-style: normal;
            text-transform: none;
          "
        >
          <span
            style="
              text-align: justify;
              text-justify: inter-character;
              text-align-last: justify;
            "
            >姓名：</span
          >
          {{ info.patientName }}
          {{
            info.patientGender == 1
              ? '男'
              : info.patientGender == 2
              ? '女'
              : '未知'
          }}
        </div>
        <div
          class="info-item"
          style="
            width: 33.33%;
            font-size: 12px;
            font-weight: 400;
            color: #000000;
            line-height: 22px;
            text-align: left;
            font-style: normal;
            text-transform: none;
          "
        >
          <span
            style="
              text-align: justify;
              text-justify: inter-character;
              text-align-last: justify;
            "
            >年龄：</span
          >
          {{ info.ageYear }}年{{ info.ageMonth }}月
        </div>
        <div
          class="info-item"
          style="
            width: 33.33%;
            font-size: 12px;
            font-weight: 400;
            color: #000000;
            line-height: 22px;
            text-align: left;
            font-style: normal;
            text-transform: none;
          "
        >
          <span
            style="
              text-align: justify;
              text-justify: inter-character;
              text-align-last: justify;
            "
            >电话：</span
          >{{ info.phone }}
        </div>
        <div
          class="info-item"
          style="
            width: 33.33%;
            font-size: 12px;
            font-weight: 400;
            color: #000000;
            line-height: 22px;
            text-align: left;
            font-style: normal;
            text-transform: none;
          "
        >
          <span
            style="
              text-align: justify;
              text-justify: inter-character;
              text-align-last: justify;
            "
            >科室：</span
          >{{ info.deptName }}
        </div>
        <div
          class="info-item"
          style="
            width: 33.33%;
            font-size: 12px;
            font-weight: 400;
            color: #000000;
            line-height: 22px;
            text-align: left;
            font-style: normal;
            text-transform: none;
          "
        >
          <span
            style="
              text-align: justify;
              text-justify: inter-character;
              text-align-last: justify;
            "
            >诊号：</span
          >{{ info.visitNo }}
        </div>
        <div
          class="info-item"
          style="
            width: 33.33%;
            font-size: 12px;
            font-weight: 400;
            color: #000000;
            line-height: 22px;
            text-align: left;
            font-style: normal;
            text-transform: none;
          "
        >
          <span
            style="
              text-align: justify;
              text-justify: inter-character;
              text-align-last: justify;
            "
            >类型：</span
          >
          {{ info.visitType == 1 ? '初诊' : '复诊' }} ({{
            info.regType == 1 ? '普通' : '急诊'
          }})
        </div>
      </div>

      <div
        class="case-info"
        style="
          border-bottom: 2px solid rgba(0, 0, 0, 0.9);
          margin-bottom: 10px;
          padding-bottom: 10px;
        "
      >
        <div
          class="info-item"
          style="
            display: flex;
            width: 100%;
            font-size: 12px;
            font-weight: 400;
            color: #000000;
            line-height: 22px;
            text-align: left;
            font-style: normal;
            text-transform: none;
          "
        >
          <span
            style="
              width: 50px;
              display: block;
              text-align: justify;
              text-justify: inter-character;
              text-align-last: justify;
            "
            >初步诊断</span
          >：
          <ul
            style="
              width: calc(100% - 100px);
              margin-left: 10px;
              list-style: none;
              padding: 0;
            "
          >
            <li>{{ info.diagnosis }}</li>
          </ul>
        </div>
      </div>

      <div
        class="case-info"
        style="
          border-bottom: 2px solid rgba(0, 0, 0, 0.9);
          margin-bottom: 10px;
          padding-bottom: 10px;
        "
      >
        <div v-for="value in info.groupList">
          <div style="font-size: 12px; line-height: 2">
            <span>{{ value.groupName }}</span>
            <span style="margin-left: 10px">{{ value.usageCodeText }}</span>
            <span style="margin-left: 10px">{{ value.frequencyCodeText }}</span>
            <span style="margin-left: 10px"
              >{{ value.cycle }}{{ value.cycleUnitText }}</span
            >
            <span style="margin-left: 10px">{{ value.ivDripRate }}滴/分钟</span>
          </div>
          <table
            class="cdp-table"
            style="
              margin-left: 10px;
              padding-left: 20px;
              margin-top: 5px;
              margin-bottom: 15px;
              font-size: 12px;
              position: relative;
              text-align: left;
            "
          >
            <thead>
              <tr style="line-height: 2">
                <th style="width: 25%"></th>
                <th style="width: 10%"></th>
                <th style="width: 15%"></th>
                <th style="width: 10%"></th>
                <th style="width: 10%"></th>
                <th style="width: 30%"></th>
              </tr>
            </thead>
            <tbody style="line-height: 2" v-for="value1 in value.detailList">
              <!-- <tr>
                <td colspan="6">{{ value1.drugName }}</td>
              </tr> -->
              <tr>
                <td colspan="6" v-if="!value1.signature">
                  {{ value1.drugName }}
                </td>
                <td colspan="6" v-else>
                  <img :src="value1.signature" alt="" style="height: 50px;width: 50px;" />
                </td>
              </tr>
              <tr>
                <td></td>
                <td>
                  {{
                    useBaseDataStore.getEnumData(
                      value1.skinTest,
                      'skinTestEnum'
                    )
                  }}
                </td>
                <td>中西成药</td>
                <td>{{ value1.dosage }}{{ value1.dosageUnitText }}</td>
                <td>
                  {{ value1.totalOutQty }}{{ value1.totalOutQtyUnitText }}
                </td>
                <td>{{ value1.remark }}</td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
      <div
        class="case-info"
        style="
          border-bottom: 2px solid rgba(0, 0, 0, 0.9);
          margin-bottom: 10px;
          padding-bottom: 10px;
        "
      >
        <div
          class="info-item"
          style="
            display: flex;
            width: 100%;
            font-size: 12px;
            font-weight: 400;
            color: #000000;
            line-height: 22px;
            text-align: left;
            font-style: normal;
            text-transform: none;
          "
        >
          <span
            style="
              width: 52px;
              display: block;
              text-align: justify;
              text-justify: inter-character;
              text-align-last: justify;
            "
            >联系电话</span
          >：
          <div style="margin-left: 5px">{{ info.phone }}</div>
        </div>
        <div
          class="info-item"
          style="
            display: flex;
            width: 100%;
            font-size: 12px;
            font-weight: 400;
            color: #000000;
            line-height: 22px;
            text-align: left;
            font-style: normal;
            text-transform: none;
          "
        >
          <span
            style="
              width: 52px;
              display: block;
              text-align: justify;
              text-justify: inter-character;
              text-align-last: justify;
            "
            >联系地址</span
          >：
          <div style="margin-left: 5px">{{ info.address }}</div>
        </div>
      </div>

      <!-- 底部信息 -->
      <div class="footer" style="display: flex; flex-wrap: wrap">
        <div
          class="info-item"
          style="
            display: flex;
            width: auto;
            font-size: 12px;
            font-weight: 400;
            color: #000000;
            line-height: 22px;
            text-align: left;
            font-style: normal;
            text-transform: none;
          "
        >
          <span
            style="
              width: 65px;
              display: block;
              text-align: justify;
              text-justify: inter-character;
              text-align-last: justify;
            "
            >打印时间：</span
          >
          <div style="margin-left: 5px">{{ info.printTime }}</div>
        </div>
      </div>
      <!-- 底部信息 -->
      <!-- 底部信息 -->
      <div style="width: 180px; margin-left: auto">
        <div
          style="
            font-size: 12px;
            width: 24%;
            font-weight: 400;
            color: #000000;
            line-height: 22px;
            text-align: left;
            font-style: normal;
            text-transform: none;
            display: flex;
            width: 100%;
            align-items: center;
            margin-bottom: 10px;
          "
        >
          <span style="display: block">医生姓名：</span>
          <div
            style="
              width: 120px;
              height: 40px;
              display: flex;
              justify-content: center;
            "
            v-if="info.signature"
          >
            <img :src="info.signature" alt="" style="height: 40px" />
          </div>
          <div v-else>{{ info.doctorName }}</div>
        </div>
        <div
          style="
            font-size: 12px;
            width: 24%;
            font-weight: 400;
            color: #000000;
            line-height: 22px;
            text-align: left;
            font-style: normal;
            text-transform: none;
            display: flex;
            width: 100%;
            align-items: center;
            margin-bottom: 10px;
          "
        >
          <span style="display: block">完诊日期：</span>{{ info.diagnosisDate }}
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { defineComponent, reactive } from 'vue';
import stores from '@/store';
const useBaseDataStore = stores.useBaseDataStore();
const props = defineProps<{
  info: any;
  groupList: any[];
  uuid: string;
}>();
const getHtml = (uuid: string) => {
  // 获取dom9元素
  const dom9Element = document.getElementById(uuid);
  if (!dom9Element) {
    //console.error('未找到打印元素');
    //ElMessage.error('未找到打印内容');
    return;
  }
  const htmlContent = dom9Element.innerHTML || '';
  return htmlContent;
};
defineExpose<{
  getHtml: (value: any) => void;
}>({
  getHtml,
});
</script>

<style scoped lang="scss">
//   font-family: Arial, sans-serif;
//   padding: 34px 30px;
//   background-color: #fff;
//   height: 100%;
// }
//
// .hospital-name {
//   text-align: center;
//   font-size: 16px;
//   margin-bottom: 20px;
// }
//
// .patient-info,
// .footer {
//   display: flex;
//   flex-wrap: wrap;
// }
// .patient-info,
// .case-info {
//   border-bottom: 2px solid rgba(0, 0, 0, 0.9);
//   margin-bottom: 10px;
//   padding-bottom: 10px;
// }
// .info-item {
//   font-size: 12px;
//   width: 24%;
//   font-weight: 400;
//   font-size: 12px;
//   color: #000000;
//   line-height: 22px;
//   text-align: left;
//   font-style: normal;
//   text-transform: none;
// }
// .footer {
//   .info-item {
//     display: flex;
//     width: auto;
//   }
// }
// .footer2 {
//   width: 180px;
//   margin-left: auto;
//   .info-item {
//     display: flex;
//     width: 100%;
//     align-items: center;
//     span {
//       display: block;
//     }
//     .img {
//       width: 120px;
//       height: 40px;
//       display: flex;
//       justify-content: center;
//       img {
//         height: 40px;
//       }
//     }
//
//     margin-bottom: 10px;
//   }
// }
// .case-info {
//   .info-item {
//     display: flex;
//     width: 100%;
//     span {
//       width: 50px;
//       display: block;
//     }
//   }
//   .cdp-table {
//     margin-left: 10px;
//     padding-left: 20px;
//     margin-top: 5px;
//     margin-bottom: 15px;
//     font-size: 12px;
//     position: relative;
//     text-align: left;
//     border-left: 1px solid #000;
//   }
//   .cdp-table::after {
//     content: '';
//     width: 12px;
//     height: 1px;
//     position: absolute;
//     left: 0;
//     bottom: 0;
//     background: #000;
//   }
// }
// .info-item span {
//   text-align: justify;
//   text-justify: inter-character;
//   text-align-last: justify;
// }
//
// ul {
//   list-style: none;
//   padding: 0;
// }
</style>
